import React, { PureComponent } from 'react';
import { NavLink } from 'react-router-dom'
import { NavBar, Form, Input, Toast } from 'antd-mobile';
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import "../styles/Login.scss"
import {user_login} from "../api/index"


class Login extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            phone: '',
            pass: ''
        }
    }
    // componentDidMount(){
        // store.dispatch({
        //     type: 'LOGIN',
        //     token: 'jjjjjjjjj'
        // })
    // }
    getphone(e) {
        this.setState({ phone: e })
    }
    getpass(e) {
        this.setState({ pass: e })
    }

    async goLogIn() {
        // let res0 = await service.user_register({ tel: this.state.phone, password: this.state.pass });
        // console.log(res0.data);

        if (this.state.phone && this.state.pass) {
            // if(/^1[0-9]{10}$/)
            let res = await user_login({ loginname: this.state.phone, password: this.state.pass });
            console.log(res);
            if (res.data.code == 200) {
                Toast.show({
                    content: '登陆成功！'
                })
                localStorage.setItem("token",res.data.data.token)
                localStorage.setItem("userid",res.data.data.userid)
                this.props.history.push('/');
            } else {
                Toast.show({
                    content: '登陆失败'
                })
            }
        } else {
            Toast.show({
                content: '请输入账号密码！'
            })
        }
    }

    render() {
        return (
            <div className='login'>
                <NavBar className='header' onBack={() => { this.props.history.go(-1) }}>登录</NavBar>
                <div className="inputbox">
                    <Form layout='horizontal' className='form'>
                        <Form.Item
                            name='username'
                            rules={[{ required: true, message: '手机号/账户名/邮箱不能为空' }]}
                        >
                            <Input
                                placeholder='手机号/账户名/邮箱'
                                clearable
                                onChange={(e) => { this.getphone(e) }}
                            />
                        </Form.Item>
                        <Form.Item
                            name='password'
                            rules={[{ required: true, message: '密码不能为空' }]}
                            extra={
                                <div className="eye">
                                    {!this.state.visible ? (
                                        <EyeInvisibleOutline onClick={() => this.setState({ visible: true })} />
                                    ) : (
                                        <EyeOutline onClick={() => this.setState({ visible: false })} />
                                    )}
                                </div>
                            }
                        >
                            <Input
                                placeholder='请输入密码'
                                clearable
                                type={this.state.visible ? 'text' : 'password'}
                                onChange={(e) => { this.getpass(e) }}
                            />
                        </Form.Item>
                    </Form>
                </div>
                <div className={(this.state.phone && this.state.pass) ? 'btn' : 'btn active'} onClick={() => { this.goLogIn() }}>登录</div>
                <NavLink className='link' to={'/register'}>手机快速注册</NavLink>
            </div>
        );
    }
}

export default Login;